<template>
<div>
  <h1>注册</h1>
  <li>
    <label>用户名:</label>
    <input type="text" name="user_name" id="user_name" v-model="form.username" @click="username">
    <span class="error_tip">{{ error.username }}</span>
  </li>
  <li>
    <label>密码:</label>
    <input type="password" name="pwd" id="pwd" v-model="form.password" @click="password">
    <span class="error_tip">{{ error.password }}</span>
  </li>
  <li>
    <label>确认密码:</label>
    <input type="password" name="cpwd" id="cpwd" v-model="password1" @click="pwd1">
    <span class="error_tip">{{ error.password1 }}</span>
  </li>
  <li>
    <label>手机号:</label>
    <input type="text" name="phone" id="phone" v-model="form.mobile" @click="mobile">
    <span class="error_tip">{{ error.mobile }}</span>
  </li>
</div>
</template>

<script>
export default {
  name: "day22",
  data(){
    return{
      form:'',
      error: {username: '', password: '', password1: '', mobile: ''},
      password1: '',

    }
  },
  methods:{
    username() {
      let name = this.form.username
      //  1.检查是否为空undifined
      if (name === undefined) {
        this.error.username = '必须输入用户名'
        return false
      } else {
        this.error.username = ''
      }
      //  2.格式是否正确
      let reg = /\w{5,10}$/
      if (!reg.test(name)) {
        this.error.username = '请输入正确的格式'
        return false
      } else {
        this.error.username = ''
      }
      //  3. 唯一性验证
      this.axios.post('user/', this.form)
        .then(res => {
          console.log(res)
          if (res.data.code === 10010) {
            this.error.username = '必须输入用户名'
          }
          if (res.data.code === 10011) {
            this.error.username = '请输入正确格式'
          }
          if (res.data.code === 10012) {
            this.error.username = '用户名已存在'
          }
          this.error.username = '用户名正确'
        })

    },
    password() {
      let password = this.form.password
      //  1.检查是否为空undifined
      if (password === undefined) {
        this.error.password = '必须输入密码'
        return false
      } else {
        this.error.password = ''
      }
      //  2.格式是否正确
      let reg = /\w{8,20}$/
      if (!reg.test(password)) {
        this.error.password = '请输入正确的密码格式'
        return false
      } else {
        this.error.password = ''
      }
      //  3. 唯一性验证
      this.axios.post('user/', this.form)
        .then(res => {
          if (res.data.code === 10013) {
            this.error.password = '必须输入密码'
          }
        })
    },
    pwd1() {
      let password1 = this.password1
      //  1.检查是否为空undifined
      if (password1 === undefined) {
        this.error.username = '必须输入第二次密码'
        return false
      } else {
        this.error.password1 = ''
      }
      //  2.格式是否正确
      let reg = /\w{8,20}$/
      if (!reg.test(password1)) {
        this.error.password1 = '请输入正确的密码格式'
        return false
      } else {
        this.error.password1 = ''
      }
      if (this.form.password === password1) {
        this.error.password1 = '牛'
        return true
      }
    },
    mobile() {
      let mobile = this.form.mobile
      if (mobile === undefined) {
        this.error.mobile = '请输入手机号'
        return false
      } else {
        this.error.mobile = ''
      }
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(mobile)) {
        this.error.mobile = '请输入正确的格式'
      } else {
        this.error.mobile = ''
      }
      this.axios.post('user/', this.form)
        .then(res => {
          console.log(res)
          if (res.data.code === 10015) {
            this.error.username = '必须输入手机号'
          }
          if (res.data.code === 10016) {
            this.error.username = '请输入正确格式'
          }
          if (res.data.code === 10017) {
            this.error.username = '用户名已存在'
          }
        })
    },
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>
